@charset "utf-8";

/* ADVANCED STORE SELECT POPUP */

/* structure */
div#mz_genericPopup > div.mz_storeSelect_pop { padding: 0!important; }
.mz_storeSelect_pop { }
.mz_selectIntro { display: flex; flex-direction: column; gap: 10px; padding: 20px 10px; }
.mz_selectMain { padding: 20px 10px; }

/* intro */
.mz_selectIntro h1 { font-size: 24px; font-weight: bold; }
.mz_selectIntro h1 span { }
.mz_selectIntro p { font-size: 11px; display: flex; gap: 10px; }
.mz_selectIntro .mz_autoLocate p { display: none; }
.mz_selectIntro .mz_autoLocate a { display: block; padding: 12px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; }


/* main common */
.mz_selectMain table .fa-solid,
.mz_selectMain table .fa-regular { font-size: 14px; }

/* search */
.mz_searchSelected fieldset { display: flex; padding: 10px 0; }
#mz_priContent .mz_searchSelected input[type=text],
#mz_priContent .mz_searchSelected button { width: unset; }
#mz_priContent .mz_searchSelected input[type=text] { min-width: 78%; border-right: none; font-size: 13px; }
#mz_priContent .mz_searchSelected button { font-size: 0.85em; font-weight: bold; text-transform: uppercase; padding: 0.625em 12px; }
#mz_priContent .mz_searchSelected button span { display: none; }

/* undo responsive table styles */
.mz_selectMain table tr th { display: table-cell; text-align: left; white-space: nowrap; }
.mz_selectMain table tr td { display: table-cell; }
.mz_selectMain table td:before { content: none; display: none; }

/* table - common */
.mz_selectMain table tr,
.mz_selectMain table tr:nth-child(even),
.mz_selectMain table th { background: #fff; } /* reset table bg colours */
.mz_selectMain table,
.mz_selectMain table tr,
.mz_selectMain table th,
.mz_selectMain table td { border-top: none; border-bottom: none; }
.mz_selectMain table th,
.mz_selectMain table td { padding: 10px 5px; vertical-align: middle; }
.mz_selectMain table th { text-transform: uppercase; font-size: 11px; }
.mz_selectMain table td { font-size: 11px; }
.mz_selectMain table tr td:first-child { text-align: center; }
.mz_selectMain table tr td:last-child { text-align: right; }	

.mz_selectMain table a { display: inline-block; padding: 4px 8px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; }

.mz_storeTitle { font-weight: bold; padding: 0 0 5px 0; }
.mz_storeStatus { font-size: 11px; }	

/* table - selected store */
span.mz_currentStore { display: inline-block; padding: 4px 8px; text-align: center; }

ul.mz_storeDelOptions { display: flex; justify-content: center; list-style: none; gap: 0.5em; text-align: center;}
ul.mz_storeDelOptions li { padding-right: 0.5em; display: flex; gap: 0.5em; align-items: center; }
ul.mz_storeDelOptions li:last-of-type { border-right: 0; padding-right: 0; }
li.mz_available::before { content:"✔"; }
li.mz_notAvail::before { content:"🗙"; }


/* table - other stores */
.mz_selectMain table.mz_otherStore_list { margin-top: 20px; }

.mz_selectMain table tr td .mz_moreStores { text-align: left; padding: 10px 0; }
.mz_selectMain table .mz_moreStores .fa-solid { font-size: 3em; float: left; padding: 10px 15px 10px 0; }
.mz_selectMain table .mz_moreStores a { padding: 0; text-align: left; }
.mz_selectMain table .mz_moreStores a:hover,
.mz_selectMain table .mz_moreStores a:active { text-decoration: underline; }

@media screen and (min-width: 768px) {
    .mz_storeSelect_pop { display: grid; grid-template-columns: 275px auto; }
    .mz_selectIntro,
    .mz_selectMain { padding: 40px 20px; }
    .mz_selectIntro { gap: 20px; }
    .mz_selectIntro h1 { font-size: 36px; }
    .mz_selectIntro h1 span { display: block; }
    .mz_selectIntro h1:after { content: " "; display: block; margin: 20px 0; height: 5px; width: 80px; }
    .mz_selectIntro .mz_autoLocate p { display: flex; margin-bottom: 20px; }
    .mz_selectIntro .mz_autoLocate p .fa-solid { font-size: 3em; }

    #mz_priContent .mz_searchSelected input[type=text] { min-width: 50%; font-size: 16px;}
    .mz_selectIntro p,
    .mz_selectMain table th,
    .mz_selectMain table td { font-size: 13px; }

    #mz_priContent .mz_searchSelected button span { display: inline; padding: 0 5px; }
}